import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'

import Detail from './Detail'
export default class Message extends Component {
  state = {
    messages: []
  }
  pushLook = (id) => {
    this.props.history.push(`/home/message/${id}`)
  }

  replaceLook = (id) => {
    this.props.history.replace(`/home/message/${id}`)
  }

  componentDidMount() {
    setTimeout(() => {
      const messages = [
        { id: 1, title: 'Message1' },
        { id: 2, title: 'Message2' },
        { id: 3, title: 'Message3' },
      ]
      this.setState({
        messages
      })
    }, 1000);
  }
  render() {
    const messages = this.state.messages
    return (
      <div>
        <ul>
          {
            messages.map(item => (
              <li key={item.id}>
                <Link to={"/home/message/" + item.id}>{item.title}</Link>
                &nbsp;
                <button onClick={() => this.pushLook(item.id)}>push查看</button>
                &nbsp;
                <button onClick={() => this.replaceLook(item.id)}>replace查看</button>
              </li>
            ))
          }
        </ul>
        <button onClick={this.props.history.goBack}>back回退</button>
        <Route path="/home/message/:id" component={Detail}></Route>
      </div>
    )
  }
}
